<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<style>
    #searchOptionTb{display: none;}
</style>
<table id="searchgrid" class="topjui-datagrid"></table>

<div id="searchOptionTb">
    <form id="option_form">
        <input id="searchOptionbox" name="boardname" class="selectp" autocomplete="off" placeholder="请输入查询条件"  style="width:180px;height: 24px;">
    </form>
</div>
<form id="customerform" method="post" style="padding-top:1px">
    <input type="hidden" name="projectid"  >
    <input type="hidden" name="projectname"  >
    <input type="hidden" name="projectcode"  >
    <input type="hidden" name="projectuser"  >
    <input type="hidden" name="voltmark"  >
    <input type="hidden" name="volume"  >
    <input type="hidden" name="usertype"  >
    <input type="hidden" id="routerid" name="routerid"  >
    <input type="hidden" id="boardid" name="boardid"  >
    <input type="hidden" name="boardlng"  >
    <input type="hidden" name="boardlat"  >
    <table style="margin:6px; width: 98%">
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">配电房名称：</td>
            <td>
                <input type="text" name="boardname" autocomplete="off" class="selectp" data-options="required:true" style="width:350px;height: 24px;">
            </td>
            <td class="label" width="126px" style="text-align: right">配电房单位名称：</td>
            <td>
                <input type="text" name="factoryname" autocomplete="off" class="selectp" data-options="required:true" style="width:350px;height: 24px;">
            </td>

        </tr>
        <tr style="height: 30px">
            <td class="label"  width="126px" style="text-align: right">所属单位负责人：</td>
            <td>
                <input type="text" name="factoryuser" autocomplete="off" class="selectp" data-options="required:true" style="width:350px;height: 24px;">
            </td>
            <td class="label" width="126px" style="text-align: right">所属单位联系方式：</td>
            <td>
                <input type="text" name="factoryphone" autocomplete="off" class="selectp" data-options="required:true" style="width:350px;height: 24px;">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">所属巡视单位：</td>
            <td>
                <input type="text" id="routername" name="routername"  class="selectp" data-options="required:true" style="width:350px;height: 24px;">
            </td>
            <td class="label" width="126px" style="text-align: right">巡视人员：</td>
            <td>
                <select id="cunsumerid" name="cunsumerid" style="width: 378px;height: 26px;" class="selectp">
                </select>
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">运维类型：</td>
            <td colspan="3">
                <select name="tasktype" id="tasktype" style="width: 378px;height: 26px;" class="selectp">
                </select>
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript" charset="utf-8" th:inline="none">
    var searchgrid;
    $(function(){
        searchgrid = $('#searchgrid').datagrid({
            url:"/boardroom/list",
            method:'get',
            fit : false,
            fitColumns : true,
            border : false,
            pagination : true,
            idField : 'id',
            pageSize : 10,
            pageList : [ 10,20 ],
            sortName : 'id',
            sortOrder : 'desc',
            singleSelect: true,
            checkOnSelect : true,
            selectOnCheck : true,
            nowrap : false,
            columns:[[
                {
                    field:'id',
                    title:'编号',
                    width:50,
                    checkbox : true
                }, {
                    field:'boardname',
                    title:'配电房名称',
                    sortable:true,
                    width:60
                }, {
                    field:'voltmark',
                    title:'用户电压登记',
                    hidden:true
                }, {
                    field:'volume',
                    title:'容量',
                    hidden:true
                }, {
                    field:'usertype',
                    title:'用户类型',
                    hidden:true
                }, {
                    field:'factoryname',
                    title:'单位名称',
                    hidden:true
                }, {
                    field:'factoryuser',
                    title:'单位联系人',
                    hidden:true
                }, {
                    field:'factoryphone',
                    title:'单位联系方式',
                    hidden:true
                }, {
                    field:'checktime',
                    title:'定时巡检日期',
                    hidden:true
                }, {
                    field:'projectid',
                    title:'所属项目ID',
                    hidden:true
                }, {
                    field:'projectcode',
                    title:'所属项目编码',
                    hidden:true
                }, {
                    field:'projectname',
                    title:'所属项目名称',
                    hidden:true
                }, {
                    field:'projectuser',
                    title:'项目负责人',
                    hidden:true
                }, {
                    field:'routerid',
                    title:'所属巡视单位ID',
                    hidden:true
                }, {
                    field:'routername',
                    title:'所属巡视单位',
                    width:60
                }, {
                    field:'boardlng',
                    title:'配电房所在位置lng',
                    hidden:true
                }, {
                    field:'boardlat',
                    title:'配电房所在位置lat',
                    hidden:true
                }
            ]],
            toolbar:[{
                text:document.getElementById('searchOptionTb').innerHTML
            },{
                text:'查询',
                iconCls : 'fa fa-search',
                height: '24px',
                handler : function() {
                    search_search();
                }
            }],
            onClickRow :function(rowIndex,rowData){
                search_editFun(rowData.id);
            }
        });

    });

    function search_editFun(id) {
        var index = searchgrid.datagrid('getRowIndex', id);
        var rows = searchgrid.datagrid('getRows');
        var o = rows[index];
        $('#customerform').form('load', o);
        $('#boardid').val(id);
        //手动添加change事件（重要）；
        $('#routerid').change();
        //运维类型
        $.ajax({
            type:'get',
            url:'/sys/groupsParam',
            data:{
                groups:'运维类型'
            },
            cache:false,
            dataType:'json',
            success:function(response){
                if(response.code == '200'){
                    secondDatas = response.result;
                    //遍历回传的数据添加到二级select
                    $.each(secondDatas, function(key, secondData) {
                        var option = '<option value="'+secondData.value+'">'+secondData.title+'</option>';
                        $("#tasktype").append(option);
                    });
                    //二级select展示
                    $("#tasktype").fadeIn("slow");
                }
            },
            error:function(){
                alert("请求失败")
            }
        });
    }


    function search_search(){
        var param = form2Json("option_form");
        $('#option_form').form('submit', {
            url : '/boardroom/list',
            onSubmit:function(){
                return true;
            },
            success : function(result) {
                try {
                    var r = $.parseJSON(result);
                    searchgrid.datagrid({
                        url:'/boardroom/list',
                        pagination : true,
                        idField : 'id',
                        pageSize : 10,
                        pageList : [ 10,20 ],
                        sortName : 'id',
                        sortOrder : 'desc',
                        queryParams: param,　　//关键之处
                        data:r
                    });

                } catch (e) {
                    $.messager.alert('提示', result);
                }
            }
        });
    }
    $(document).ready(function() {
        document.getElementById("routerid").onchange = function () {
            $("#cunsumerid").empty();
            //根据一级select的值，异步获取数据更新二级的选项
            $.ajax({
                type:'get',
                url:'/cunsumer/routerCunsumer',
                data:{
                    routerid:$("#routerid").val()
                },
                cache:false,
                dataType:'json',
                success:function(response){
                    if(response.code == '200'){
                        secondDatas = response.result;
                        //遍历回传的数据添加到二级select
                        $.each(secondDatas, function(key, secondData) {
                            var option = '<option value="'+secondData.id+'">'+secondData.name+'</option>';
                            $("#cunsumerid").append(option);
                        });
                        //二级select展示
                        $("#bcunsumerid").fadeIn("slow");
                    }
                },
                error:function(){
                    alert("请求失败")
                }
            });
        };
    })
</script>
</html>